<template>
	<el-form ref="applyForm" :model="applyForm" :rules="applyRules" label-width="120px" class="apply-form">
	  	<el-form-item label="申请类型" required>
	  		<el-radio-group v-model="applyForm.Category" @change="fnHasStandard">
	  			<el-radio class="radio" label="0">标准</el-radio>
				<el-radio class="radio" label="1">补单</el-radio>
	  		</el-radio-group>
		</el-form-item>
	  	<el-form-item label="申请部门" required>
		    <el-col :span="9">
		    	<el-select v-model="applyForm.DeptID" placeholder="请选择">
					<el-option v-for="item in depts" :key="item.ORGANIZATION_ID" :label="item.ORGANIZATION_NAME" :value="item.ORGANIZATION_ID"></el-option>
				</el-select>
		    </el-col>
		    <el-col :span="5" style="text-align: right;padding-right: 10px;"><span style="color: red;">*</span>申请人姓名</el-col>
		    <el-col :span="9">
		      	<el-form-item prop="Applicant">
		      		<el-input v-model="applyForm.Applicant"></el-input>
		      	</el-form-item>
		    </el-col>
		</el-form-item>
		
		<!--<el-form-item label="申请人电话" prop="Mobile">-->
			<!--<el-col :span="23">-->
				<!--<el-input v-model="applyForm.Mobile"></el-input>-->
			<!--</el-col>-->
		<!--</el-form-item>-->

		<el-form-item label="来访单位" prop="VisitorDept">
			<el-col :span="23">
				<el-input v-model="applyForm.VisitorDept"></el-input>
			</el-col>
		</el-form-item>
		<el-form-item label="来访事由" prop="Reason">
			<el-col :span="23">
				<el-input v-model="applyForm.Reason"></el-input>
			</el-col>
		</el-form-item>
		<!--<el-form-item label="主宾姓名" prop="Visitors">-->
			<!--<el-tag type="primary" :key="tag" v-for="tag in applyForm.Visitors" :closable="true" :close-transition="false" @close="fnCloseVisitor(tag)">-->
				<!--{{tag}}-->
			<!--</el-tag>-->
			<!--<el-input class="input-new-tag" v-if="visitorInputVisible" v-model="visitorInputValue" ref="visitorTagInput" size="small" @keyup.enter.native="fnVisitorInputConfirm" @blur="fnVisitorInputConfirm">-->
			<!--</el-input>-->
			<!--<el-button v-else class="button-new-tag" size="small" @click="fnVisitorInput">添加来访人员</el-button>			-->
		<!--</el-form-item>-->
	  	
	  	<el-form-item label="用餐地点" required>
		    <!--<el-col :span="9">-->
		      	<!--<el-form-item prop="VisitorLevel">-->
		      		<!--<el-select v-model="applyForm.VisitorLevel" placeholder="请选择">-->
						<!--<el-option v-for="item in visitorlevels" :key="item" :label="item" :value="item"></el-option>-->
					<!--</el-select>-->
		      	<!--</el-form-item>-->
		    <!--</el-col>-->
			<el-col :span="9">
				<el-form-item prop="Room">
					<el-select v-model="applyForm.Room" placeholder="请选择 ">
						<el-option v-for="item in rooms" :key="item" :label="item" :value="item">
						</el-option>
					</el-select>
				</el-form-item>
			</el-col>
		    <el-col class="label-txt" :span="5"><span style="color: red;">*</span>就餐人数</el-col>
		    <el-col :span="9">
		      	<el-form-item prop="MealNum">
		      		<el-input-number style="width:270px;" v-model="applyForm.MealNum"></el-input-number>
		      	</el-form-item>
		    </el-col>
		</el-form-item>
		
	  	<el-form-item label="就餐日期" required>
		    <el-col :span="6">
		      	<el-form-item>
		      		<el-date-picker v-if="hasStandard" style="width: 178px;" v-model="applyForm.Date" type="date" placeholder="选择日期" clearable :picker-options="pickerOptions0" @change="fnSetDate">
					</el-date-picker>
					<el-date-picker v-else style="width: 178px;" v-model="applyForm.Date" type="date" placeholder="选择日期" clearable :picker-options="pickerOptions1" @change="fnSetDate">
					</el-date-picker>
		      	</el-form-item>
		    </el-col>
		    <el-col :span="5">
		    	<el-form-item>
		      		<el-select v-model="applyForm.MealType" placeholder="请选择" @change="fnMatchingDiningType">
						<el-option v-for="item in diningTypes" :key="item.value" :label="item.label" :value="item.value"></el-option>
					</el-select>
		      	</el-form-item>
	    	</el-col>
	    	<el-col :span="6" class="m-l-10">
		    	<el-form-item>
		    		<el-time-picker style="width: 178px;" v-model="applyForm.StartTime"  placeholder="开始时间" format="HH:mm" value-format="HH:mm" disabled></el-time-picker>
		      	</el-form-item>
	    	</el-col>
	    	<el-col :span="1">
		    	<el-form-item>
		    		<el-time-picker style="width: 178px;" v-model="applyForm.EndTime"  placeholder="结束时间" format="HH:mm" value-format="HH:mm" disabled></el-time-picker>
		      	</el-form-item>
	    	</el-col>
		</el-form-item>
		
		<el-form-item label="就餐标准" required v-show="!hasStandard">
		    <!--<el-col :span="9">-->
		      	<!--<el-form-item prop="Room">-->
		      		<!--<el-select v-model="applyForm.Room" placeholder="请选择 ">-->
						<!--<el-option v-for="item in rooms" :key="item" :label="item" :value="item">-->
						<!--</el-option>-->
					<!--</el-select>-->
		      	<!--</el-form-item>-->
		    <!--</el-col>-->
		    <!--<block v-show="!hasStandard">-->
		    	<!--<el-col class="label-txt" :span="5"><span style="color: red;">*</span>就餐标准</el-col>-->
			    <el-col :span="9">
			      	<el-form-item prop="Price">
			      		<el-select v-model="applyForm.Price" placeholder="请选择 " style="width: 230px;">
							<el-option v-for="item in prices" :key="item" :label="item + '元'" :value="item">
							</el-option>
						</el-select>
			      	</el-form-item>
			    </el-col>
		    <!--</block>-->
		</el-form-item>
	  	
		<el-form-item>
			<el-button type="primary" @click="fnMealApply">提交申请</el-button>
		</el-form-item>
	</el-form>
</template>

<script>
	import Svc from '../service/index.js'
	export default {
		data() {
			//验证电话号码
	      	var checkMobile = (rule, value, callback) => {
	      		var reg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/; 
	        	if (value === '') {
          			callback(new Error('请输入申请人联系电话！'));
        		} else if (!reg.test(value)) {
	          		callback(new Error('请输入有效的手机号码！'));
	        	} else {
	          		callback();
	        	}
	      	};
	      	
	      	//验证来访人数
	      	var checkNum = (rule, value, callback) => {
	        	if (value === 0) {
          			callback(new Error('请输入人数'));
        		} else {
	          		callback();
	        	}
	      	};
	      	
			return {
				//就餐日期 -> 正常
				pickerOptions0: {
		          disabledDate(time) {
		            return time.getTime() < Date.now() - 8.64e7;
		          }
		        },
		        //就餐日期 -> 补单
		        pickerOptions1: {
		          disabledDate(time) {
		            return time.getTime() >= Date.now();
		          }
		        },
				//来访人员
		        visitorInputVisible: false,
		        visitorInputValue: '',
		        hasStandard : true, //申请类型是否为标准
		        visitorlevels:[],//来访人员级别
		        rooms:[],//所有餐厅
				prices:[],//所有餐费
				depts : [],//所有部门
		        
		        //用餐类型
		        diningTypes : [{
		        	label : "早餐",
		        	value : 0
		        },{
		        	label : "午餐",
		        	value : 1
		        },{
		        	label : "晚餐",
		        	value : 2
		        }],
		        
    	        applyRules: {
    	        	Applicant: [
		            	{ required: true, message: '请输入申请人姓名', trigger: 'blur' }
		          	],
		          	Mobile: [
		            	{ required: true, validator: checkMobile,  trigger: 'blur' }
		          	],
		          	VisitorDept: [
		            	{ required: true, message: '请输入来访单位名称', trigger: 'blur' }
		          	],
                    Reason: [
                        { required: true, message: '请输入来访事由', trigger: 'blur' }
                    ],
//		          	Visitors: [
//		          		{ type: 'array', required: true, message: '请填写来访人员！', trigger: 'blur' }
//		          	],
//		          	VisitorLevel: [
//		          		{ required: true, message: '请选择来访人员的级别', trigger: 'change' }
//		          	],
		          	MealNum: [
		            	{ required: true, validator: checkNum,  trigger: 'blur' }
		          	]
		        },
				//申请内容
				applyForm:{
					Category : "0",//申请类型
					EmployeeID:'', // 操作人ID
					EmployeeName:'',//操作人姓名
					Applicant:'',//申请人姓名
					DeptID:'', // 申请人部门ID
					Dept:'', // 申请人部门
					Mobile:'', //申请人电话
					Date:new Date(), // 就餐日期,
					MealType:1,//用餐类型
					StartTime:new Date(2017,11,13,10,0),//开始时间
					EndTime:new Date(2017,11,13,13,0),//结束时间
					VisitorDept:'',// 来访部门
                    Reason:'',//来访事由
					Visitors:[],// 来访人员
					VisitorLevel:'',// 来访等级
					MealNum:0,// 就餐人数
					Room : '', //就餐地点
					Price : 0 //就餐标准
			    }
			}
		},
		methods: {
            //显示message提示框
            openMessage : function(msg,type){
    	        this.$message({
		          	showClose: true,
		          	message: msg,
		          	type: type
		        });
            },
            //选择申请类型
            fnHasStandard(){
            	this.hasStandard = !this.hasStandard
            },
            //获取所有部门信息
		    fnGetDepts(){
		    	var that = this
	            Svc.fnGetData('/api/account/alldepts',{},function(res){
	            	if (res.body.ErrCode == 0){
	            		that.depts = res.body.Data
	            	} else {
	            		that.openMessage("部门信息获取失败！",'error')
	            	}
	            },function(res){
	            	that.openMessage("网络错误，请重新！",'error')
	            })
		    },
			//删除来访人员标签
	      	fnCloseVisitor(tag) {
	        	this.applyForm.Visitors.splice(this.applyForm.Visitors.indexOf(tag), 1);
	      	},
	      	//添加新增的来访人员名单
      	    fnVisitorInputConfirm() {
		        let visitorInputValue = this.visitorInputValue;
		        if (visitorInputValue) {
		          this.applyForm.Visitors.push(visitorInputValue);
		        }
		        this.visitorInputVisible = false;
		        this.visitorInputValue = '';
		    },
		    //新增来访人员->切换为输入模式
		    fnVisitorInput() {
		        this.visitorInputVisible = true;
		        this.$nextTick(_ => {
		          this.$refs.visitorTagInput.$refs.input.focus();
		        });
		    },
            //获取就餐日期
            fnSetDate(val){
            	this.applyForm.Date = val;
            },
            //根据用餐类型设定开始/结束时间
            fnMatchingDiningType(){
            	var that = this
            	if (that.applyForm.MealType == 0) {
            		that.applyForm.StartTime = new Date(2017,11,13,5,0)
            		that.applyForm.EndTime = new Date(2017,11,13,8,0)
            	} else if (that.applyForm.MealType == 1) {
            		that.applyForm.StartTime = new Date(2017,11,13,10,0)
            		that.applyForm.EndTime = new Date(2017,11,13,13,0)
            	} else if (that.applyForm.MealType == 2) {
            		that.applyForm.StartTime = new Date(2017,11,13,15,0)
            		that.applyForm.EndTime = new Date(2017,11,13,20,0)
            	}
            },
			//将时间转换为分钟数
			fnDataToMinute(time){
				var moment = require('moment');
				var list = (moment(time).format('HH:mm')).split(':')
				return parseInt(list[0])*60 + parseInt(list[1])
			},
			//获取所有餐厅及餐费
			fnGetRoomAndPrices(){
				var that = this
	            Svc.fnGetData('/api/dataconfig',{},function(res){
	            	if (res.body.ErrCode == 0){
	            		that.rooms = res.body.Data.Room
                        that.prices = res.body.Data.MealPrice
	            		that.visitorlevels = res.body.Data.VisitorLevel
	            	} else {
	            		that.openMessage("当前用餐申请获取失败！ ",'error')
	            	}
	            },function(res){
	            	that.openMessage("网络错误，请重新！ ",'error')
	            })
			},
            //用餐申请
			fnMealApply(){
				var that = this
				var moment = require('moment');
				that.$refs.applyForm.validate((valid) => {
					if (valid) {
						//用餐时段转换为分钟
						that.applyForm.Category = parseInt(that.applyForm.Category)
						that.applyForm.Date = moment(that.applyForm.Date).format('YYYY-MM-DD')
						that.applyForm.StartTime = that.fnDataToMinute(that.applyForm.StartTime)
						that.applyForm.EndTime = that.fnDataToMinute(that.applyForm.EndTime)
						
						//申请部门
						for(var i=0;i<that.depts.length;i++){
							var item = that.depts[i]
							if (item.ORGANIZATION_ID == that.applyForm.DeptID) {
								that.applyForm.Dept = item.ORGANIZATION_NAME
							}
						}

						// 没有实际意义，用于处理用餐标准提交时闪现的问题
                        this.hasStandard = !this.hasStandard

			            Svc.fnPostData('/api/meal/apply',that.applyForm,function(res){
			            	if (res.body.ErrCode == 0){
			            		that.openMessage('用餐申请提交成功！','success')
			            		setTimeout(function () {
			            			that.$router.push({ path: '/myapply' });
					          	},1500);
			            	} else {
			            		that.openMessage(res.body.ErrMsg,'error')
			            	}
			            },function(){
			            	that.openMessage("网络错误，请重新！",'error')
			            })
					} else {
		            	return false
		          	}
				})
			}
		},
		mounted() {
			//获取用户信息
			var user = sessionStorage.getItem('user');
			if (user) {
				user = JSON.parse(user);
				this.applyForm.EmployeeID = user.EmployeeID || '';
				this.applyForm.EmployeeName = user.Name || '';
				this.applyForm.DeptID = user.DeptID || '';
				this.applyForm.Dept = user.Dept || '';
			}
			
			//获取所有部门信息
		    this.fnGetDepts()
			//获取所有餐厅及餐费
			this.fnGetRoomAndPrices()
		}
	}
</script>

<style scoped>
	.m-l-10{
		margin-left: 10px;
	}

	.apply-form {
		margin:20px;
		width:70%;
		min-width:600px;
	}
	
	.label-txt {
	    text-align: right;
    	margin-right: 10px;
	}
	
	/*tag标签 start*/
	.el-tag {
	    height: 32px;
    	line-height: 30px;
		margin-right: 10px;
	}
	
	.button-new-tag {
		margin-right: 10px;
		height: 32px;
		line-height: 22px;
		padding-top: 0;
		padding-bottom: 0
	}
	
	.input-new-tag {
		width: 78px;
		margin-right: 10px;
		vertical-align: bottom
	}
	
	.input-new-tag .el-input__inner {
		height: 32px
	}
	/*tag标签 end*/
</style>